<template>
    <div class="banner">
        <el-carousel :interval="4000" type="card" height="220px">
            <el-carousel-item v-for="(item,index) in banners" :key="index">
                <img :src="item.imageUrl" alt="" @click="playMusic(item)"/>
                <div class="title"> 
                    {{ item.typeTitle }}
                </div>
            </el-carousel-item>
        </el-carousel>
    </div>
</template>
<script>
export default {
    name:'',
    props:{
       banners:{
        type:Array,
        default(){
            return []
        }
       }
    },
    data() {
        return {
            
        }
    },
    methods:{
        async playMusic(item){
            if(item.targetType == 0) return;
            // 歌曲信息
            if(item.targetType == 1 || item.targetType == 300){
                // 获取歌曲的URL
                let songUrl = await this.$API.playmusic.getSongUrl(item.targetId);
                if(songUrl.code == 200){
                    // 保存到仓库
                    this.$store.dispatch('saveSongUrl',songUrl.data[0].url)
                }
                // 获取这首歌的详细信息
                let songDetail = await  this.$API.songlistdetail.getEverySongDetail(item.targetId);
                if(songDetail.code == 200){
                    // 将当前播放歌曲的信息保存在仓库
                    this.$store.dispatch('saveSongDetail',songDetail.songs[0])
                    // 添加到播放列表
                    this.$store.dispatch('addPlayinglist',songDetail.songs[0])
                }
                

            }else if(item.targetType == 1000){
                // 跳转到歌单
                this.$router.push('/songlistdetail/' + item.targetId);  
            }else if(item.targetType == 10){
                // 跳转专辑
                this.$router.push("/albumdetail/" + item.targetId);
            }
        }
        
    },
    created(){
        
    },
}
</script>
<style lang="less" scoped>

  .banner{
    position: relative;
    img{
        width: 100%;
    }
  }
  .title{
    position: absolute;
    bottom: 0px;
    right: 0px;
    background-color: var(--themeColor);
    color: #fff;
    font-size: 12px;
    padding: 3px 8px;

  }

</style>